<template>
    <swiper id="swiperTop" :options="swiperOption" ref="mySwiper">
        <!-- slides -->
        <swiper-slide v-for="(item,index) in sowing_list" :key="item.public_id">
            <img :src="item.icon_url" :alt="item.public_name" />
        </swiper-slide>
        <!-- Optional controls -->
        <div class="swiper-pagination"  slot="pagination"></div>
    </swiper>
</template>

<script>
    import 'swiper/dist/css/swiper.css'
    import { swiper, swiperSlide } from 'vue-awesome-swiper'
    export default {
        name: "Sowing",
        props:{
            sowing_list:Array
        },
        data(){
            return {
                swiperOption:{
                    notNextTick:true,
                    pagination:{
                        el:'.swiper-pagination',
                        clickable:true,
                        // bulletActiveClass: 'my-bullet-active',
                    },
                    loop:true,
                    autoplay:{
                        delay:1000
                    },
                    speed:600,
                    on:{
                        slideChangeTransitionEnd(){
                            //console.log(this.activeIndex)
                        }
                    }
                }
            }
        },
        computed:{
            swiper(){
                return this.$refs.mySwiper.swiper;
            }
        },
        mounted(){
            // this.swiper.slideTo(5,1);
        },
        components:{
            swiper, swiperSlide
        }
    }
</script>
<style scoped>
    #swiperTop{
        width:100%;
        height: 10rem;
        background-color:transparent ;
    }
    #swiperTop img{
        height: 100%;
        width: 100%;
    }
    #swiperTop >>> .swiper-pagination-bullet-active{
        background-color: #75a342 !important;
    }
</style>